<template>
	<div>
		<div class="search-line">
			项目名称<el-select
				v-model="searchData.projectId.value"
				placeholder="项目名称"
				style="width: 120px; margin-right: 30px; margin-left: 10px"
			>
				<el-option v-for="item in projectList" :key="item.id" :label="item.projName" :value="item.id" />
			</el-select>

			<el-button type="primary" @click="loadData()">查询</el-button>
			<el-button type="warning" @click="clearnSearch()">重置</el-button>

			<el-button type="success" @click="addDialog = true">添加</el-button>
		</div>

		<div class="border w-full">
			<el-table :data="tableData.records">
				<!---------------------表单数据------------------------------->

				<el-table-column prop="projectName" label="项目" width="100" />
				<el-table-column prop="title" label="主题" width="400" />
				<el-table-column prop="price" label="消费(万元)" width="100" />

				<el-table-column prop="dealTime" label="消费时间" width="250" />
				<el-table-column prop="createTime" label="入库时间" width="250" />
				<!---------------------表单数据------------------------------->
				<el-table-column label="操作">
					<template #default="scope">
						<el-button size="small" @click="openEdit(scope.row.id)">修改</el-button>
						<el-button size="small" @click="deleted(scope.row.id)" type="danger">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination
			style="margin-bottom: 20px"
			background
			layout="prev, pager, next"
			:page-count="tableData.pages"
			v-model:current-page="tableData.page"
			@update:current-page="loadData"
		/>
		<!--------------------------------组件------------------>

		<!------------------详情弹窗--------------------------------->
		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="detailDialog"
			title="详情"
			width="30%"
			:before-close="resetForm"
		>
			<div>
				<div>项目 : {{ form.projId }}</div>
				<div>主题 : {{ form.title }}</div>
				<div>支出 : {{ form.price }}</div>
				<div>支出时间 : {{ form.dealTime }}</div>
			</div>
			<el-button @click="resetForm">关闭</el-button>
		</el-dialog>

		<!------------------新增弹窗--------------------------------->
		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="addDialog"
			title="新增"
			width="30%"
			:before-close="resetForm"
		>
			<!--数据开始---->
			<el-form :model="form" label-width="120px">
				<el-form-item label="项目">
					<el-select v-model="form.projectId" placeholder="项目名称" style="width: 120px; margin-right: 30px; margin-left: 10px">
						<el-option v-for="item in projectList" :key="item.id" :label="item.projName" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="主题">
					<el-input v-model="form.title" />
				</el-form-item>
				<el-form-item label="支出(万元)">
					<el-input v-model="form.price" />
				</el-form-item>

				<el-form-item label="支出时间">
					<div class="block">
						<el-date-picker
							v-model="form.dealTime"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="Pick a date"
							:default-value="new Date(2014, 1, 1)"
						/>
					</div>
				</el-form-item>

				<!--数据截止---->
				<el-form-item>
					<el-button type="primary" @click="add">添加</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!------------------编辑弹窗--------------------------------->
		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="editDialog"
			title="编辑"
			width="30%"
			:before-close="resetForm"
		>
			<!--数据开始---->
			<el-form :model="form" label-width="120px">
				<el-form-item label="项目">
					<el-select v-model="form.projectId" placeholder="项目名称" style="width: 120px; margin-right: 30px; margin-left: 10px">
						<el-option v-for="item in projectList" :key="item.id" :label="item.projName" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="主题">
					<el-input v-model="form.title" />
				</el-form-item>
				<el-form-item label="支出(万元)">
					<el-input v-model="form.price" />
				</el-form-item>

				<el-form-item label="支出时间">
					<div class="block">
						<el-date-picker
							v-model="form.dealTime"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="Pick a date"
							:default-value="new Date(2014, 1, 1)"
						/>
					</div>
				</el-form-item>

				<!--数据截止---->
				<el-form-item>
					<el-button type="primary" @click="edit">修改</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import ImgsUpload from "@/components/img/imgsUpload/index.vue";
import ImgsShow from "@/components/img/imgShow/index.vue";
import { getBudgetPage, updateBudget, deletedBudget, addBudget, getBudgetById } from "@/api/budget";

import { getProjectPage, updateProject, getProjectList, deletedProject, addProject, getProjectById } from "@/api/project";

import { useUserStore } from "@/stores/userStores";
const projectList = ref([]);
const tableData = reactive({
	records: [],
	orderBy: "",
	pages: 0,
	page: 1,
	size: 10,
	query: {},
});
const form = ref({
	id: "", //项目进度表id
	projectId: "", //项目id
	title: "", //进度描述
	price: "", //百分比

	dealTime: "", //创建时间
});
//------------选择框------------------------
const options = [
	{
		value: "Option1",
		label: "Option1",
	},
	{
		value: "Option2",
		label: "Option2",
		disabled: true,
	},
];

//------------基本常量------------------------
const userStore = useUserStore();
const token = userStore.token;
const isAdmin = ref(false);
const detailDialog = ref(false);
const editDialog = ref(false);
const addDialog = ref(false);

// --------图片相关----------
const imgList = ref([]);
const changeImgList = (array) => {
	imgList.value = array;
	form.value.pictures = JSON.stringify(array);
};

// ------------------- 搜索操作 ------------------------

const searchData = ref({
	//项目进度表id
	id: {
		key: "id",
		sqlKeyword: "EQ",
		value: "",
	},
	//项目id
	projectId: {
		key: "project_id",
		sqlKeyword: "EQ",
		value: "",
	},

	//百分比
	percentage: {
		key: "percentage",
		sqlKeyword: "EQ",
		value: "",
	},
	//上传user
	createUser: {
		key: "createUser",
		sqlKeyword: "EQ",
		value: "",
	},
	//创建时间
	createTime: {
		key: "createTime",
		sqlKeyword: "EQ",
		value: "",
	},
});

function clearnSearch() {
	searchData.value.id.value = "";
	searchData.value.projectId.value = "";

	searchData.value.percentage.value = "";
	searchData.value.createUser.value = "";
	searchData.value.createTime.value = "";
	loadData();
}

/**
 * 查看详情
 * */
const openDetail = async (id) => {
	const res = await getBudgetById(id);
	form.value = res.data;
	// 图片处理

	detailDialog.value = true;
};

/**
 * 打开编辑按钮
 */
const openEdit = async (id) => {
	const res = await getBudgetById(id);
	form.value = res.data;
	// 图片处理

	editDialog.value = true;
};

/**
 *修改
 */
const edit = async () => {
	const res = await updateBudget(form.value);
	ElMessage.success("修改成功");
	editDialog.value = false;
	loadData();
	resetForm();
};

/**
 *添加
 */
const add = async () => {
	console.log("保存数据：", form.value);
	const res = await addBudget(form.value);
	ElMessage.success("添加成功");
	addDialog.value = false;
	loadData();
	resetForm();
	form.value = {};
};

/**
 * 删除数据
 */
const deleted = async (id) => {
	ElMessageBox.confirm("是否确认删除？", "提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		const res = await deletedBudget({ id });
		ElMessage.success("success");
		loadData();
	});
};

/**
 * 重置表单
 */
const resetForm = () => {
	if (addDialog.value) {
		addDialog.value = false;
	}
	if (editDialog.value) {
		editDialog.value = false;
	}
	if (detailDialog.value) {
		detailDialog.value = false;
	}
	// form.value = {};
	// 图片处理
	imgList.value = [];
};
const userList = ref([]);
const loadData = async () => {
	tableData.query = searchData.value;
	const res = await getBudgetPage(tableData);
	tableData.records = res.data.list;
	tableData.page = res.data.page;
	tableData.pages = res.data.pages;
};

const loadlProjectList = async () => {
	const res = await getProjectList();
	projectList.value = res.data;
};
onMounted(() => {
	// 初始加载分页数据
	loadData(tableData);
	isAdmin.value = userStore.getIsAdmin();
	console.log("isAdmin{}", isAdmin.value);
	loadlProjectList();
});
</script>

<style scoped>
.search-line {
	display: flex;
	margin-bottom: 10px;
	text-align: center;
	line-height: 35px;
}
</style>
